<template>
    <div class="com-container">
        <!-- 柱状图 -->
        <div ref="chartDom" class="com-chart"></div>
        <TableDetail v-if="detailDialog" :detailDialog="detailDialog" :info="info" :queryForm="queryForm" @closeDialog="closeDialog" />
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';
import { thousandsFormat } from '@/utils/tools';
import TableDetail from './table-detail.vue';

@Component({
    name: 'BarChart',
    components: {
        TableDetail,
    },
})
export default class BarChart extends Vue {
    @Prop() data;
    @Prop() queryForm;
    chartInstance: any = null;
    detailDialog: boolean = false;
    title: string = '监听表分布详情';

    // 静态触警分组
    emphasisStyle = {
        itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0,0,0,0.3)',
        },
    };
    // xAxisData: any[] = [
    //     'TCASHB 资金业务444444444表1',
    //     'TCASHB 资金业务4444444444表2',
    //     'TCASHB 资金业务444444444445表3',
    //     'TCASHB 资金业务77777777777表4',
    //     'TCASHB 资金业务9999999999表5',
    //     'TCASHB 资金业务33333333333表6',
    //     'TCASHB 资金业务555555555表7',
    //     'TCASHB 资金业务44444444444表8',
    //     'TCASHB 资金业务22222222222表9',
    //     'TCASHB 资金业务111111111表10',
    // ];
    //  data1: any[] = [120, 123, 190, 45, 87, 90, 120, 105, 76, 45];
    // data2: any[] = [30, 65, 40, 66, 76, 108, 66, 98, 54, 88];
    xAxisData: any[] = [];
    data1: any[] = [];
    data2: any[] = [];

    info: any = {};

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }

    mounted() {
        this.initChart();
        window.handleBarClick = this.handleBarClick;
        // window.addEventListener('resize', this.screenAdapter);
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            color: ['#90cb73', '#ed6666'],
            legend: {
                // data: ['监听成功', '监听失败'],
                left: '20%',
                icon: 'rect',
                itemHeight: 14, // 修改icon图形大小
                itemWidth: 14,
                // itemGap: 10,
                padding: [4, 11],
                selectedMode: false,
                textStyle: {
                    fontSize: 12,
                    fontWeight: 500,
                    color: 'rgba(0,0,0,.65)',
                },
            },
            tooltip: {
                trigger: 'axis',
                triggerOn: 'mousemove',
                enterable: true, // 鼠标是否可进入提示框浮层中
                confine: true, // 是否将 tooltip 框限制在图表的区域内
                extraCssText: 'z-index: 99;', // 额外附加到浮层的 css 样式
                // showDelay: 100,
                // hideDelay: 100,
                position: function(p) {
                    // 其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 35];
                },
                // position: 'top',
                backgroundColor: 'rgba(255,255,255,0.8)',
                borderColor: 'rgba(0,0,0,0.1)',
                textStyle: {
                    color: 'rgba(0, 0, 0, 0.65)',
                },

                formatter: params => {
                    let values: any[] = [];
                    let colors: any[] = [];
                    const name = params[0].name;
                    params.forEach(ele => {
                        values.push(ele.value);
                        colors.push(ele.color);
                    });
                    return `${name}(成功:<span style="border-bottom:1px solid ${colors[0]};color:${colors[0]};margin:0 3px;font-size:8px;cursor:pointer;" onclick="handleBarClick('${this.title}', '${name}')">${values[0]}次</span>失败:<span style="border-bottom:1px solid ${colors[1]};color:${colors[1]};margin:0 3px;font-size:8px;cursor:pointer;" onclick="handleBarClick('${this.title}', '')">${values[1]}次</span>)`;
                },
                // trigger: 'axis',
                axisPointer: {
                    // Use axis to trigger tooltip
                    type: 'none', // 'shadow' as default; can also be 'line' or 'shadow'
                },
            },
            xAxis: {
                data: this.xAxisData,
                splitLine: { show: false },
                splitArea: { show: false },
                axisLine: {
                    lineStyle: {
                        color: '#E9E9E9',
                        width: 1,
                    },
                },

                triggerEvent: true,
                // 设置文本过长超出隐藏...表示
                axisLabel: {
                    interval: 0,
                    fontStyle: 'oblique',
                    color: '#8c8c8c',
                    margin: 8,
                    formatter: function(params) {
                        let val = '';
                        if (params.length > 6) {
                            val = params.substr(0, 6) + '...';
                            return val;
                        } else {
                            return params;
                        }
                    },
                },
                axisTick: {
                    show: true,
                    inside: false,
                    alignWithLabel: true,
                },
            },
            yAxis: {
                splitNumber: 3,
                minInterval: 1,
                max: function(value) {
                    // 最大设定,为0时默认三个刻度
                    if (value.max == 0) {
                        return 3;
                    }
                },
                // offset: -11,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#cccccc',
                        // color: 'rgba(0,0,0,0.06)',
                        width: 1,
                    },
                },
                axisLabel: {
                    color: '#8c8c8c',
                    formatter: '{value}次',
                    showMinLabel: false,
                    // textStyle: {
                    //     color: 'rgba(0, 0, 0, 0.65)',
                    // },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#cccccc',
                        // color: '#E9E9E9',
                        width: 1,
                    },
                },
            },
            grid: {
                left: '2%',
                right: '2%',
                top: '25%',
                bottom: '3%',
                height: '75%', // 高度
                containLabel: true,
            },
            series: [
                {
                    name: '监听成功',
                    type: 'bar',
                    stack: 'one',
                    // emphasis: this.emphasisStyle,
                    data: this.data1,
                    barMinHeight: 1,
                    barWidth: 45, // 柱图宽度
                    barMaxWidth: 45,
                },
                {
                    name: '监听失败',
                    type: 'bar',
                    stack: 'one',
                    // emphasis: this.emphasisStyle,
                    barMinHeight: 1,
                    data: this.data2,
                    barWidth: 45, // 柱图宽度
                    barMaxWidth: 45,
                },
            ],
        };
        this.chartInstance.setOption(initOption);
        this.extension(this.chartInstance);
        // 点击事件
        this.chartInstance.on('click', param => {
            const name = param.name;
            if (name) {
                this.handleBarClick(this.title, name);
            }
        });
    }

    // 鼠标悬浮显示全部内容
    extension(chart) {
        // 注意这里，是以X轴显示内容过长为例，如果是x轴的话，需要把params.componentType == 'xAxis'改为yAxis
        // 判断是否创建过div框,如果创建过就不再创建了
        // 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
        let elementDiv: any = document.getElementById('extension');
        // elementDiv.disabled = false;
        if (!elementDiv) {
            let div: any = document.createElement('div');

            div.setAttribute('id', 'extension');
            div.style.display = 'block';
            document.querySelector('html').appendChild(div);
        }
        // else {
        //     elementDiv.disabled = true;
        // }
        chart.on('mouseover', function(params) {
            if (params.componentType == 'xAxis') {
                let elementDiv: any = document.querySelector('#extension') as HTMLElement;
                // elementDiv.disabled = true;
                // 设置悬浮文本的位置以及样式
                let elementStyle =
                    'position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px';
                elementDiv.style.cssText = elementStyle;
                elementDiv.innerHTML = params.value;
                document.querySelector('html').onmousemove = function(event) {
                    let elementDiv = document.querySelector('#extension') as HTMLElement;
                    let xx = event.pageX - 10;
                    let yy = event.pageY + 15;
                    elementDiv.style.top = yy + 'px';
                    elementDiv.style.left = xx + 'px';
                };
            }
        });
        chart.on('mouseout', function(params) {
            if (params.componentType == 'xAxis') {
                let elementDiv = document.querySelector('#extension') as HTMLElement;
                elementDiv.style.cssText = 'display:none';
            }
        });
    }

    // 柱状图点击
    handleBarClick(title: string, name: string) {
        this.info.title = title;
        this.info.name = name;
        this.detailDialog = true;
    }

    closeDialog() {
        this.detailDialog = false;
    }
    updateChart(e) {
        const dataOption = {
            xAxis: { data: e.xData },
            series: e.data,
        };
        this.chartInstance.setOption(dataOption);
        this.extension(this.chartInstance); // 这个方法是用来处理鼠标悬浮显示全部内容的
    }
    dispose() {
        this.chartInstance.dispose(); // 销毁实例
        this.initChart();
    }
    screenAdapter() {
        const titleFontSize = ((this.$refs.chartDom as any).offsetWidth / 100) * 5.6;
        // 分辨率变化图表配置
        const adapterOption = {
            axisLabel: {
                textStyle: {
                    fontSize: titleFontSize,
                },
            },
            // 柱状条目
            series: [
                {
                    barWidth: titleFontSize,
                },
            ],
        };
        this.chartInstance.setOption(adapterOption);
        this.chartInstance.resize();
    }

    destroyed() {
        // window.removeEventListener('resize', this.screenAdapter);
    }
}
</script>

<style scoped>
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.notClick {
    cursor: not-allowed;
    pointer-events: none;
}
</style>
